<template>
  <el-card shadow="hover">
    <div class="content">
      <el-table :data="filterTableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30"/>
        <el-table-column label="ID" prop="id" width="60"/>
        <el-table-column label="性别" width="70">
          <template #default="scope">
          <el-tag v-if="scope.row.gender == 1">男</el-tag>
          <el-tag v-else-if="scope.row.gender == 2" type="success">女</el-tag>
          <el-tag v-else type="info">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="right" width="200">
          <template #header>
          <div class="function-header">
          <el-input v-model="table.search" size="small" placeholder="Type to search" />
          <el-button size="small" type="danger" @click="handleDelete()">批量删除</el-button>
          </div>
          </template>
          <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="currentChangeHandle"
      layout="prev, pager, next" :total="table.total" :default-page-size="table.pageSize"/>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      table: {data: [], search: '', total: 100, pageSize: 6, multipleSelection: []},
    }
  },
}
</script>

<style lang="scss">
.el-card {
  height: 96%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    .el-pagination {
      margin: 20px auto;
    }
  }
}
.function-header {
  display: flex;
  justify-content: space-between;
  .el-input {
    width: 100px;
  }
}
</style>
